<template>
    <u-popup :show="show" mode="bottom" closeable @close="openShow()" >
        <view class="aite-box">
            <!-- <uni-easyinput v-model="keyWord" prefixIcon="search"></uni-easyinput> -->
            <view class="aite-search">
                <u-search v-model="keyWord" placeholder="输入昵称搜索@人员"></u-search >
            </view>
            <scroll-view class="list-box" :scroll-y="true">
                <view v-for="(item,index) in list"
                    :key="index"
                    class="list-user"
                    @click="tapFriend(item)">
                    <image class="user-avatar mr-2" src="@/static/logo.png"></image>
                    <text class="font-md flex-1-w-0  text-ellipsis">{{ item.name }}</text>
                </view>
            </scroll-view>
        </view>
    </u-popup>
</template>

<script>
    // @好友列表选择
    export default{
        name: "more-list",
        data(){
            return {
                keyWord: '',
                show: false,
                list: []
            }
        },
        methods:{
            open(){
                uni.hideKeyboard()
                this.openShow()
            },
            openShow(){
                this.show = !this.show
            },
            tapFriend(item){
                this.$emit('change', {content: item.name + ' '})
                this.openShow()
            },
        }
    }
</script>

<style scoped lang="scss">
    .aite-box{
        background-color: #FFFFFF;
        padding: 60rpx 20rpx 20rpx 20rpx;
    }
    .aite-search{
        flex-direction: row;
    }
    .list-box{
        height: 600rpx;
    }
    .list-user{
        // flex flex-row align-center u-border-bottom py-2
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        padding: 20rpx 0;
    }
    .user-avatar{
        width: 70rpx;
        height: 70rpx;
        border-radius: 35rpx;
        background-color: $uni-bg-color-grey;
    }
</style>
